<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('【请填写功能名称】列表')" />
</head>
<style>
    .answer-img{
        width: 32px;
        height: 32px;
        border-radius: 50%;
        font-size: 18px;
        line-height: 32px;
        text-align: center;
        color: #333;
        border: 1px solid #000;
    }

    .anwser_height {
        height: 600px;
        overflow-y: scroll;
        overflow-x: hidden;
    }

    .questionbox {
        padding: 15px 15px;
        border: 1px solid #e4e4e4;
        background: url('../../../question_bg.png') repeat-x;
        border-radius: 5px;
        margin-right: 10px;
    }

    .qus {
        display: flex;
    }

    .qusicon {
        display: block;
        width: 32px;
        height: 32px;
        margin-right: 10px;
    }

    .question {
        font-size: 16px;
        line-height: 32px;
        text-indent: 0;
        width: 999px;
        margin-left: 20px;
    }

    .questionbox .qus .question {
        font-weight: bold;
    }

    .username {
        color: #134ba0;
    }

    .span-line {
        margin-left: 8px;
        margin-right: 8px;
        color: #999999;
    }

    .timebox {
        margin-top: 10px;
        padding-left: 42px;
    }

    .answerBox {
        padding: 15px 15px;
        border: 1px solid #e4e4e4;
        border-radius: 5px;
        margin-right: 10px;
        margin-top: 10px;
    }

    .footer {
        display: flex;
        margin-top: 20px;
    }

    .ansicon {
        display: block;
        width: 32px;
        height: 32px;
        margin-right: 10px;
        border: 1px solid #000;
        border-radius: 50%;
        font-size: 18px;
        text-align: center;
        font-weight: 600;
        line-height: 32px;
    }
</style>
<body>
    <!--<input type="hidden" th:value="${questionId}" id="questionId"/>-->
     <div class="container-div">
         <div class="questionbox">
            <div class="qus">
                <img src="">
                <span class="question" style="font-size: 16px" th:text="${question.questionContent}"></span>
            </div>
            <div class="timebox">
                 <span th:text="${question.userName}"></span>
                <span class="span-line">|</span>
                <span th:text="${#dates.format(question.createTime,'yyyy-MM-dd HH:mm:ss')}"></span>
            </div>
         </div>
         <div class="answerBox" th:each="answer : ${answers}">
                 <div class="ans" style="display: flex;">
                     <div class="answer-img">
                         答
                     </div>
<!--                     <img src="">-->
                     <span class="question" style="font-size: 16px" th:text="${answer.questionAnswerContent}"></span>
                     <div th:hidden="${userId == answer.questionAnswerUser?false:true}">
                         <button href="javascript:void(0)" onclick="deleteAnswer(this.value)" th:value="${answer.questionAnswerId}"><i class="fa fa-remove" ></i></button>
                     </div>
                 </div>
                 <div class="timebox">
                     <span class="username" th:text="${answer.userName}"></span>
                     <span class="span-line">|</span>
                     <span class="username" th:text="${#dates.format(answer.createTime,'yyyy-MM-dd HH:mm:ss')}"></span>
                 </div>
         </div>
         <div class="answerBox">
             <div class="ans" style="display: flex;">
                 <span class="question" style="font-size: 16px">我要回答</span>
             </div>
             <div class="timebox">
                 <form class="form-horizontal m" id="form-answer-add">
                     <input type="hidden" th:value="${question.questionId}" name="questionId"/>
                     <div class="form-group">
                         <textarea name="questionAnswerContent" class="form-control" rows="15">

                         </textarea>
                     </div>
                 </form>
             </div>
         </div>
     </div>
</body>
<th:block th:include="include :: footer" />
<script type="text/javascript">
    var prefix = ctx + "system/answer"
    $("#form-answer-add").validate({
        focusCleanup: true
    });


    function submitHandler() {
        if ($.validate.form()) {
            $.operate.save(prefix + "/add", $('#form-answer-add').serialize(),
                function (data) {
                    $.modal.alert(data.msg,data.code)
                }
            )
        }
    }
    
    function deleteAnswer(value) {
        console.log(value)
        $.ajax({
            url:prefix+"/remove",
            type:"post",
            data:{"ids":value},
            success:function(data){
                if(data.code==500){
                    $.modal.msgError(data.msg)
                }
                if(data.code==0){
                    $.modal.msgSuccess(data.msg)
                    var int=self.setInterval(function(){  // 这个方法是说在延迟两秒后执行大括号里的方法
                        $.modal.reload();
                    },500) //这里2000代表两秒
                }
            }
        })
    }
</script>
</html>